<template>
  <CommonCard title="今日订单" value="256,206,1">
    <template #default>
      <div ref="lineChartRef" style="width: 100%; height: 100%"></div>
    </template>
    <template #footer>
      <div class="footer">
        <span>昨日订单量</span>
        <span class="emphasis">￥ 210,000,0</span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts" setup>
import CommonCard from "./CommonCard.vue";
import { ref, onMounted } from "vue";
// 引入echarts插件
import * as echarts from "echarts";
import type { EChartsType } from "echarts";
let myChart: EChartsType;

// 创建变量接收真实dom
let lineChartRef = ref();

let getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, //两则不留白
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ], // x轴数据列表
    },
    yAxis: {
      show: false, //y轴不显示数据
    },
    series: [
      {
        name: "实时订单",
        type: "line",
        data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        // 使曲线平滑
        smooth: true,
        // 给区域设置样式
        areaStyle: {
          color: "purple",
        },
        // 曲线样式
        lineStyle: {
          opacity: 0,
        },
        // 去掉曲线上的小点
        itemStyle: {
          opacity: 0,
        },
      },
    ],
    grid: { left: 0, top: 0, right: 0, bottom: 0 },
    tooltip: {
      trigger: "axis",
    },
  };
};

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(lineChartRef.value, "dark");

  // 绘制图表
  myChart.setOption(getOption());
  // 事件监听echarts大小改变
  window.addEventListener("resize", () => {
    myChart && myChart.resize();
  });
});
</script>

<style lang="scss" scoped></style>
